<template>
  <!-- 大盒子 -->
  <div class="rig-box">
    <!-- 头部 -->
    <div class="top-box">
      <!-- 头 -->
      <div class="top1">
        <span class="">热门歌手</span>
      </div>
      <div class="top2">
        <div
          class="top3"
          v-for="(artis, index) in artists"
          :key="artis.id"
          v-if="index < 6"
          
        >
         <a @click="goartist(artis.id)"> <img :src="artis.img1v1Url" alt="" />
          <span>{{ artis.name }}</span></a>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      id: this.$route.query.id,
      //歌手u
      artists: [],
    };
  },
  mounted() {
    // this.getSimiArtist();
  },
  methods: {
    // 获取相似歌手
    // reqSimiArtist
    // async getSimiArtist() {
    //   const result = await this.$API.reqSimiArtist(this.id);
    //   console.log(result);
    //   console.log("4444444444")
    //   if (result.code == 200) {
    //     this.artists = result.artists || [];
    //   } else {
    //     this.$msg.error("获取相似歌手失败");
    //   }
    // },

    goartist(id){
      this.$router.push(`/artist?id=${id}`)
    }
  },
};
</script>

<style lang="less" scoped>
.rig-box {
  width: 200px;
  margin: 20px auto;
  .top-box {
    // width: 33.33%;
    .top1 {
      border-bottom: solid 1px #666;
      span {
        font-size: 14px;
        font-weight: bold;
        display: block;
        margin-bottom: 10px;
      }
    }
    .top2 {
      display: flex;
      flex-flow: wrap;
    }
    .top3 {
      width: 33.33%;
      margin-top: 10px;
      display: flex;
      flex-direction: column;
      // justify-content: space-between;
      align-items: center;

      span {
        margin-top: 10px;
        font-size: 12px;
        text-align: center;
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        color: #000;
      }

      img {
        height: 50px;
        width: 50px;
      }
    }
  }
}
</style>
